<template>
  <scroll>
  <div class="recommend_list">
      <router-link class="recommend_list-item"
      v-for="item in styles" 
      :key="item.key"
      :to="'/searchList/'+item.showName">
      >
      <img :src="item.imageURL">

      </router-link>
  </div>
  </scroll>
</template>

<script>
export default {
    name:"RecommendList",
    data(){
        return{
             styles: [
        {
          showName: "电子",
          imageURL:
            "https://s2.showstart.com/img/2019/20190719/9f599ebcf9464d1387ca4e78062328ff_480_480_549818.0x0.jpg",
          key: "4"
        },
        {
          showName: "摇滚",
          imageURL:
            "https://s2.showstart.com/img/2019/20190719/59a6814176ea4669aa04778fcc3e3573_480_480_270988.0x0.jpg",
          key: "2"
        },
        {
          showName: "脱口秀",
          imageURL:
            "https://s2.showstart.com/img/2019/20190719/86c0c045420c4b9a9e20c98ccabccf9b_480_480_496827.0x0.jpg",
          key: "19"
        },
        {
          showName: "话剧歌剧",
          imageURL:
            "https://s2.showstart.com/img/2019/20190719/2bff829f2c1b4e579d13e5e9dbb57888_480_480_453879.0x0.jpg",
          key: "21"
        },
        {
          showName: "儿童亲子",
          imageURL:
            "https://s2.showstart.com/img/2019/20190719/e7fe184be398444e9dd04c45e952a2a0_480_480_455720.0x0.jpg",
          key: "29"
        },
        {
          showName: "独立",
          imageURL:
            "https://s2.showstart.com/img/2019/20190719/34a9923518984e959b646f929b6016f0_480_480_353154.0x0.jpg",
          key: "26"
        }
      ]
        }
    }
}
</script>

<style>
.recommend_list {
    width: max-content;

    display: flex;
    margin-top: .2rem;
     overflow: hidden;
    
}

.recommend_list>.recommend_list-item {
    width: 2.14rem;
    height: 2rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
 margin-left: .2rem;
     padding-top: .2rem;
      overflow: hidden;
       
}

.recommend_list>.recommend_list-item img {
    width: 2.2rem;
    height: 1.4rem;
    border-radius:.1rem ;
     overflow: hidden;
}
</style>